<!DOCTYPE html>
<html lang="ZN">
<head>
    <meta charset="UTF-8">
    <title>任务列表</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <!--<link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>-->
    <!--<script src="../static/jquery/jquery-3.6.0.min.js"></script>-->
    <script src="../static/layer/layer.js"></script>
</head>
<body>
<div class="layui-bg-gray">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <div class="layui-panel">

                <div style="padding-top: 0px">
                    <table class="layui-hide" id="tab"  lay-filter="tab"></table>
                </div>

            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-sm" onclick="add()">新增任务</button>
    <!--<a href="/" class="layui-btn layui-btn-sm">刷新列表</a>-->
    <a href="/" class="layui-btn layui-btn-sm layui-btn-danger">异常列表</a>
    <span style="padding-left: 30px">CSV文件每30分钟读取一次，同时会对数据排序。</span>
</script>
<script>
    function add(){
        console.log("add");
        layer.open({
            type: 1,
            area: ['600px', '480px'],
            shadeClose: true, //点击遮罩关闭
            content: '<form class="layui-form" action="/addData">\n' +
                '    <div class="layui-form-item">\n' +
                '      <label class="layui-form-label">任务名称</label>\n' +
                '      <div class="layui-input-block" style="width: 280px">\n' +
                '        <input type="text" name="taskName" required  lay-verify="required" class="layui-input">\n' +
                '      </div>\n' +
                '    </div>\n' +
                '  <div class="layui-form-item">\n' +
                '    <label class="layui-form-label">期望时间</label>\n' +
                '    <div class="layui-input-block" style="width: 280px">\n' +
                '      <input type="text" name="expectTime" required  lay-verify="required|number" class="layui-input"\n' +
                '             placeholder="如：2330">\n' +
                '    </div>\n' +
                '  </div>\n' +
                '  <div class="layui-form-item">\n' +
                '    <label class="layui-form-label">文件目录</label>\n' +
                '    <div class="layui-input-block" style="width: 280px">\n' +
                '      <input type="text" name="localPath" required  lay-verify="required" class="layui-input">\n' +
                '    </div>\n' +
                '  </div>\n' +
                '  <div class="layui-form-item">\n' +
                '    <label class="layui-form-label">文件名称</label>\n' +
                '    <div class="layui-input-block" style="width: 280px">\n' +
                '      <input type="text" name="fileName" required  lay-verify="required" class="layui-input">\n' +
                '    </div>\n' +
                '  </div>\n' +
                '  <div class="layui-form-item">\n' +
                '    <label class="layui-form-label">文件后缀</label>\n' +
                '    <div class="layui-input-block" style="width: 280px">\n' +
                '      <input type="text" name="fileSuffix" required  lay-verify="required" class="layui-input">\n' +
                '    </div>\n' +
                '  </div>\n' +
                '  <div class="layui-form-item">\n' +
                '    <label class="layui-form-label">命名格式</label>\n' +
                '    <div class="layui-input-block" style="width: 280px">\n' +
                '      <input type="text" name="fileNameType" required  lay-verify="required|number" class="layui-input"\n' +
                '             placeholder="1:YYYYMMDD,2:YYYY-MM-DD,3:无日期">\n' +
                '    </div>\n' +
                '  </div>\n' +
                '  <div class="layui-form-item">\n' +
                '      <div class="layui-input-block" style="width: 280px">\n' +
                '        <button class="layui-btn layui-btn-sm" lay-submit>提交</button>\n' +
                '        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>\n' +
                '      </div>\n' +
                '  </div>\n' +
                '</form>'
        });
    }
    layui.use('form', function(){
        var form = layui.form;
    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use('element', function(){
        var element = layui.element;
    });
    var table = layui.table;
    layui.use('table', function(){

        table.render({
            elem: '#tab'
            , even: true //开启隔行背景
            , url: '/getData'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            , request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            }
            ,initSort: {
                field: 'expectTime' //排序字段，对应 cols 设定的各字段名
                ,type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }
            , title: '任务列表'
            , page: true
            , sort:true
            , limit: 10
            , limits: [1, 5, 10, 20, 50, 100]
            ,cellMinWidth: 90
            ,cols: [
                [
                    {field:'taskName',title: '任务名称'}
                    ,{field:'expectTime',title: '期望时间',sort: true}
                    ,{field:'localPath', title: '文件目录'}
                    ,{field:'fileName',title: '文件名称'}
                    ,{field:'fileSuffix', title: '文件后缀'}
                    ,{field:'fileNameType', title: '命名格式',templet:setType}
                    ,{field:'status', title: '任务状态',templet:setState }
                    ,{field:'operator', title: '操作',toolbar: '#barDemo'}
                ]
            ]
        });
        function setState(data){
            var states=data.status;
            if(states=="true" || states==true){
                return "<span style='color: green'>已完成检测</span>";
            }
            else
                return "<span style='color: red'>未处理</span>";
        }
        function setType(data){
            var type=data.fileNameType;
            if(type=="1" || type==1){
                return "<span>1:YYYYMMDD</span>";
            }
            else if (type=="2" || type==2)
                return "<span>2:YYYY-MM-DD</span>";
            else {
                return "<span>3:无日期</span>";
            }
        }
        //监听行工具事件
        table.on('tool(tab)', function(obj){
            var data = obj.data;
            console.log(data);
            if(obj.event === 'del'){
                console.log("delete");
                layer.open({
                    type: 1,
                    area: ['300px', '180px'],
                    shadeClose: true, //点击遮罩关闭
                    content: '<form class="layui-form" action="/deleteData">\n' +
                        '      <input type="text" name="taskName" required  lay-verify="required" hidden\n' +
                        '            value="'+data.taskName+'" style="height: 1px;margin: 0px;padding: 0px;">\n' +
                        '  <div style="padding-left: 70px;padding-top: 20px;padding-bottom: 20px"><h3 >确定删除'+data.taskName+'任务吗？</h3></div>\n' +
                        '  <div class="layui-form-item">\n' +
                        '    <div class="layui-input-block">\n' +
                        '      <button class="layui-btn layui-btn-sm" lay-submit>确定</button>\n' +
                        '    </div>\n' +
                        '  </div>\n' +
                        '</form>'
                });
            } else if(obj.event === 'edit'){
                console.log("edit");
                layer.open({
                    type: 1,
                    area: ['600px', '480px'],
                    shadeClose: true, //点击遮罩关闭
                    content: '<form class="layui-form" action="/updateData">\n' +
                        '    <div class="layui-form-item">\n' +
                        '      <label class="layui-form-label">任务名称</label>\n' +
                        '      <div class="layui-input-block" style="width: 280px">\n' +
                        '        <input type="text" name="taskName" required  lay-verify="required" class="layui-input"\n' +
                        '            value="'+data.taskName+'" readonly>\n' +
                        '      </div>\n' +
                        '    </div>\n' +
                        '  <div class="layui-form-item">\n' +
                        '    <label class="layui-form-label">期望时间</label>\n' +
                        '    <div class="layui-input-block" style="width: 280px">\n' +
                        '      <input type="text" name="expectTime" required  lay-verify="required|number" class="layui-input"\n' +
                        '            value="'+data.expectTime+'">\n' +
                        '    </div>\n' +
                        '  </div>\n' +
                        '  <div class="layui-form-item">\n' +
                        '    <label class="layui-form-label">文件目录</label>\n' +
                        '    <div class="layui-input-block" style="width: 280px">\n' +
                        '      <input type="text" name="localPath" required  lay-verify="required" class="layui-input"\n' +
                        '            value="'+data.localPath+'">\n' +
                        '    </div>\n' +
                        '  </div>\n' +
                        '  <div class="layui-form-item">\n' +
                        '    <label class="layui-form-label">文件名称</label>\n' +
                        '    <div class="layui-input-block" style="width: 280px">\n' +
                        '      <input type="text" name="fileName" required  lay-verify="required" class="layui-input"\n' +
                        '            value="'+data.fileName+'">\n' +
                        '    </div>\n' +
                        '  </div>\n' +
                        '  <div class="layui-form-item">\n' +
                        '    <label class="layui-form-label">文件后缀</label>\n' +
                        '    <div class="layui-input-block" style="width: 280px">\n' +
                        '      <input type="text" name="fileSuffix" required  lay-verify="required" class="layui-input"\n' +
                        '            value="'+data.fileSuffix+'">\n' +
                        '    </div>\n' +
                        '  </div>\n' +
                        '  <div class="layui-form-item">\n' +
                        '    <label class="layui-form-label">命名格式</label>\n' +
                        '    <div class="layui-input-block" style="width: 280px">\n' +
                        '      <input type="text" name="fileNameType" required  lay-verify="required|number" class="layui-input"\n' +
                        '             placeholder="1:YYYYMMDD,2:YYYY-MM-DD,3:无日期"\n' +
                        '            value="'+data.fileNameType+'">\n' +
                        '    </div>\n' +
                        '  </div>\n' +
                        '  <div class="layui-form-item">\n' +
                        '      <div class="layui-input-block" style="width: 280px">\n' +
                        '        <button class="layui-btn layui-btn-sm" lay-submit>提交</button>\n' +
                        '        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>\n' +
                        '      </div>\n' +
                        '  </div>\n' +
                        '</form>'
                });
            }
        });
    });
    var reloadTable = function (item) {
        table.reload("tab", {
            where: {
            }
        });
    };
    window.setInterval(function (){reloadTable.call(this)},30000);
</script>
</body>
</html>
